<template>
  <div class="my-concern">
    <div class="header">
      <div class="title">我的粉丝</div>
      <!-- <div class="search">
        <el-input placeholder="请输入关键词"
          v-model="search" clearable size="small"/>
        <el-button type="primary" size="small">搜索</el-button>
      </div> -->
    </div>
    <div class="concern-list">
      <div class="concern-item" v-for="item in fansList" :key="item.userId"
        @click="toUserCenter(item.userId)">
        <div style="display: flex; align-items: center;">
          <el-avatar :size="80" style="margin-right: 20px;">
            <div style="font-size: 2em; background-color: #00caa8; border-radius: 50%;">
              {{ item.username.slice(0, 1) }}
            </div>
          </el-avatar>
            <div>
              <div>{{ item.username }}</div>
            </div>      
        </div>
        <div>
          <el-button :size="size" type="info" plain
            v-if="item.eachOther"
            @click.stop="cancelFollow(item.userId)">已互关</el-button>
          <el-button v-else :size="size" type="primary" plain
            @click.stop="onFollow(item.userId)">关注</el-button>
        </div>
      </div>
    </div>
    <el-empty v-if="fansList.length === 0"
    description="暂无数据"></el-empty> 
  </div>
</template>

<script>
  export default {
    name: 'MyFans',
    data(){
      return {
        size: 'small',
        search: '',
        fansList: []
      }
    },
    methods: {
      getFullowList() {
        this.$axios.get('/follow/fanslist/' + 
          this.$store.state.user.userId).then(res => {
          if (res.data.code === 200) {
            this.fansList = res.data.data.records
          } else {
            this.$message.error(res.data.message)
          }
        })
      },
      onFollow(userId) {
        this.$axios.post('/follow/confirmFollow', {
          id: userId
        }).then(res => {
          if (res.data.code === 200) {
            this.$message.success('关注成功')
            this.getFullowList()
          } else {
            this.$message.error(res.data.message)
          }
        })
      },
      cancelFollow(userId) {
        this.$axios.delete(`/follow/cancle/${userId}`).then(res => {
          if (res.data.code === 200) {
            this.$message.success('取消关注成功')
            this.getFullowList()
          } else {
            this.$message.error(res.data.message)
          }
        })
      },
      toUserCenter(userId) {
        this.$router.push({path: `/userCenter/${userId}`})
      }
    },
    mounted() {
      this.getFullowList()
    }
  }
</script>

<style lang="scss" scoped>
.my-concern {
  padding: 20px;
  width: 100%;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .title {
      font-size: 1.2em;
      font-weight: bold;
    }
    .search {
      display: flex;
      align-items: center;
      .el-button {
        margin-left: 20px;
      }
    }
  }
  .concern-list {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr) );
    gap: 20px;
    .concern-item {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      border-radius: 10px;
      transition: all 0.3s;
    }
    .concern-item:hover {
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
  }
}

.el-dropdown-menu {
  margin: 0;
  padding: 10px 0;
  border-radius: 0;
  .el-dropdown-menu__item {
    margin: 0 ;
    border-radius: 0;
  }
}
</style>